module.exports = function(babel) {
    const { types: t } = babel;
  
    return {
      name: "transform-div-to-component",
      visitor: {
        JSXElement(path) {
          const openingPath = path.get("openingElement");
          if (t.isJSXIdentifier(openingPath.node.name, { name: "div" })) {
            const attributes = openingPath.node.attributes;
            let nameAttributeIndex = -1;
            let nameAttributeValue = null;
            for (let i = 0, l = attributes.length; i < l; i++) {
              if (
                t.isJSXIdentifier(attributes[i].name, { name: "name" }) &&
                t.isStringLiteral(attributes[i].value)
              ) {
                nameAttributeIndex = i;
                nameAttributeValue = attributes[i].value.value;
                break;
              }
            }
  
            if (nameAttributeIndex >= 0 && nameAttributeValue) {
              // Create a new component from the div
              const newElement = t.jsxElement(
                t.jsxOpeningElement(
                  t.jsxIdentifier(nameAttributeValue),
                  []
                ),
                t.jsxClosingElement(t.jsxIdentifier(nameAttributeValue)),
                path.node.children
              );
              
              // Replace the div with the new element
              path.replaceWith(newElement);
            }
          }
        }
      }
    };
  };
  